<template>
  <el-card class="box-card">
    <el-button class="button" type="primary" icon="Plus" @click="showBrandDialog">添加品牌</el-button>
    <el-table
      :border="true"
      style="width: 100%; margin: 20px 0"
      :data="brandList"
      v-loading="loading"
      element-loading-text="数据加载中……"
    >
      <el-table-column prop="id" label="序号" width="100" align="center"></el-table-column>
      <el-table-column prop="tmName" label="品牌名称" width="240" align="center"></el-table-column>
      <el-table-column label="品牌LOGO" align="center">
        <template #="{ row }">
          <img :src="row.logoUrl" alt="" style="width: 50px; height: 50px" />
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center">
        <template #="{ row }">
          <el-button type="warning" size="small" icon="Edit" @click="showBrandDialog(row)"></el-button>
          <el-popconfirm
            :title="`确定要删除《${row.tmName}》?`"
            icon="Delete"
            :width="200"
            @confirm="deleteHandle(row)"
          >
            <template #reference>
              <el-button type="primary" size="small" icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      background
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      :page-sizes="[5, 10, 15, 20, 30]"
      @size-change="getBrandList()"
      @current-change="getBrandList(page)"
    />
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" :close-on-click-modal="false">
      <el-form ref="formRef" :model="brandForm" :rules="brandRules" style="width: 80%">
        <el-form-item label="品牌名称" label-width="100px" prop="tmName">
          <el-input v-model="brandForm.tmName" size="large" placeholder="请输入品牌名称" autocomplete="off" />
        </el-form-item>
        <el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
          <el-upload
            class="avatar-uploader"
            action="/api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="brandForm.logoUrl" :src="brandForm.logoUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitHandle">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts" name="brand">
import { onMounted } from 'vue'
import { useBrand } from './logic'
const {
  loading,
  dialogFormVisible,
  dialogTitle,
  page,
  limit,
  total,
  brandList,
  brandForm,
  formRef,
  brandRules,
  getBrandList,
  handleAvatarSuccess,
  showBrandDialog,
  beforeAvatarUpload,
  deleteHandle,
  submitHandle
} = useBrand()
onMounted(async () => await getBrandList())
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
